import { useState } from 'react'
import { Row, Col, Form, DialogPlugin, message, Textarea, Select } from 'tdesign-react'
import { RiDeleteBack2Line } from 'react-icons/ri'

import styles from './index.module.less'

const MailTemplatesFormItem = (props: any) => {

  const {
    formFieldName,
    // addFormItem,
    removeFormItem,
    // value,
    // restFields
    topTypeOptions,
    secondTypeOptions,
  } = props

  const [topTypeValue, setTopTypeValue] = useState('')

  const openRemoveFormItemDialog = () => {
    console.log(props)
    // TODO: 打开删除确认弹窗
    const sendMailDialog = DialogPlugin({
      header: '你确定要删除这个邮件模板吗？',
      body: null,
      theme: 'warning',
      style: {
        width: '400px',
      },
      onConfirm: () => {
        removeFormItem(formFieldName)
        message.success('删除成功')
        sendMailDialog.hide()
      },
      onClose: () => {
        sendMailDialog.hide()
      },
      onCloseBtnClick: ({ e }) => {
        console.log(e)
        sendMailDialog.hide()
      },
    })
  }

  return <div className={styles.MailTemplatesFormItem}>
    <Row gutter={16} style={{ alignItems: 'center' }}>
      <Col span={2}>
        <Form.FormItem name={[formFieldName, 'topType']} rules={[{ required: true, message: '请选择顶级类型' }]}>
          <Select onChange={(_, context) => { setTopTypeValue(context.option?.label) }}>
            {topTypeOptions.map((item) => {
              return <Select.Option key={item.value} value={item.value}>{item.value}</Select.Option>
            })}
          </Select>
        </Form.FormItem>
      </Col>
      <Col span={3}>
        <Form.FormItem name={[formFieldName, 'secondType']} rules={[{ required: true, message: '请输入顶级类型规则'}]}>
          <Select>
            {(topTypeValue ? (secondTypeOptions.filter((item) => item.extends === topTypeValue)) : []).map((item) => {
              return <Select.Option key={item.value} value={item.value}>{item.value}</Select.Option>
            })}
          </Select>
        </Form.FormItem>
      </Col>
      <Col span={6}>
        <Form.FormItem name={[formFieldName, 'template']} rules={[{ required: true, message: '请输入顶级类型规则'}]}>
          <Textarea
            autosize={{ minRows: 5, maxRows: 10 }}
          />
        </Form.FormItem>
      </Col>
      <Col span={1} className={styles.operation}>
        <RiDeleteBack2Line size={24} onClick={openRemoveFormItemDialog}>删除模板</RiDeleteBack2Line>
      </Col>
    </Row>
  </div>
}

export default MailTemplatesFormItem
